<template>
	<view class="busListBody">
		<view class="selection">
			<view class="forth" @click="dayBefore">
				<image v-if="left" src="../../static/img/busInfo/left.png" mode=""></image>
				<image v-if="forbid" src="../../static/img/busInfo/forbid.png" mode=""></image>
				<view :class="['before', { forbid: ban === true }]">前一天</view>
			</view>
			<view class="calendar" @click="goCalendar">
				<image src="../../static/img/index/calendar.png" mode=""></image>
				<view class="long">|</view>
				<view class="">{{ times }}</view>
			</view>
			<view class="future" @click="dayAfter">
				<view class="">后一天</view>
				<image src="../../static/img/busInfo/right.png" mode=""></image>
			</view>
		</view>
		<!-- 车站列表 -->
		<view v-if="showBus == true" id="busList" v-for="(item, index) in busInfoList" :key="index" @click="busFun" :data-msg="item">
			<view class="time">{{ item.startTime }}</view>
			<view>
				<image class="vertical" src="/static/img/busInfo/long.png" mode=""></image>
				<view class="station_box">
					<view class="station">{{ item.stationName }}</view>
					<view class="price">￥{{ item.price }}</view>
				</view>
				<view class="target_box">
					<view class="station">{{ item.targetName }}</view>
					<view class="tickets">
						<text class="rest">余</text>
						{{ item.restTickets }}
					</view>
				</view>
				<view class="particulars">
					<view class="type">{{ item.busType }}</view>
					<view class="type">班次:{{ item.busnum }}</view>
					<view class="type">终点:{{ item.terminalName }}</view>
				</view>
			</view>
		</view>
		<!-- 提示语 -->
		<view class="marked" v-if="showBus == false">暂时没有车次哦！</view>
		<!-- 加载中 -->
		<ourLoading isFullScreen text="加载中..." :active="active"></ourLoading>
	</view>
</template>

<script>
import utils from '@/static/common/utils.js';
import value from '@/static/value/value.js';
export default {
	data() {
		return {
			times: '',
			stime: '',
			target: '',
			busInfoList: [],
			tomorrow: '',
			yesterday: '',
			ban: false,
			showBus: false,
			globalcode: '',
			active: true,
			left: true,
			forbid: false
		};
	},
	onLoad(option) {
		var that = this;
		uni.getStorage({
			key: 'departStation',
			success(res) {
				that.globalcode = res.data.departStationCode;
			}
		});
		uni.getStorage({
			key: 'endStation',
			success(res) {
				that.target = res.data.endStationName;
			}
		});
	},
	onShow() {
		var that = this;
		uni.getStorage({
			key: 'fulldate',
			success: function(res) {
				that.times = res.data.fulldate;
				that.httpData(res.data.fulldate);
			},
			fail(err) {
				// 如果没有获取到，则使用当前时间
				that.httpData(that.$ut.NewDate());
			}
		});
	},
	onPullDownRefresh(setData) {
		// 下拉监听事件
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	},
	methods: {
		httpData(setData) {
			const that = this;
			var obj = {
				startdate: setData,
				globalcode: this.globalcode,
				target: this.target,
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			obj.sign = utils.utils.GetSign(obj);
			this.$http
				.request({
					url: 'BusInfo/GetBusInfo',
					method: 'get',
					data: obj
				})
				.then(data => {
					this.active = false;
					if (data.data.result === false) {
						uni.showModal({
							title: '提示',
							content: data.data.msg,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({});
								} else if (res.cancel) {
								}
							}
						});
					}
					this.yesterday = data.data.yesterday ? data.data.yesterday : that.$ut.NewDate();
					this.times = data.data.today;
					if (this.times == this.$ut.NewDate()) {
						this.left = false;
						this.forbid = true;
						this.ban = true;
					} else {
						this.left = true;
						this.forbid = false;
						this.ban = false;
					}
					this.tomorrow = data.data.tomorrow;
					if (!data.data.result || data.data.busInfos.length == 0) {
						this.showBus = false;
						return;
					}
					this.showBus = true;
					this.busInfoList = data.data.busInfos;
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 后一天
		dayAfter() {
			this.httpData(this.tomorrow);
			var dates = new Date();
			var year = dates.getFullYear();
			var month = dates.getMonth() + 1;
			var day = dates.getDate();
			var nextDay = dates.getDate() + 1;
			var dayAfter = dates.getDate() + 2;
			if (month < 10) {
				month = '0' + month;
			}
			if (day < 10) {
				day = '0' + day;
			}
			if (nextDay < 10) {
				nextDay = '0' + nextDay;
			}
			if (dayAfter < 10) {
				dayAfter = '0' + dayAfter;
			}
			var nowDate = year + '-' + month + '-' + day;
			var tomorrow = year + '-' + month + '-' + nextDay;
			var afterDay = year + '-' + month + '-' + dayAfter;
			if (nowDate == this.tomorrow) {
				var today = '今天';
			} else if (tomorrow == this.tomorrow) {
				var today = '明天';
			} else if (afterDay == this.tomorrow) {
				var today = '后天';
			} else {
				var today = '';
			}
			const calendar = {
				fulldate: this.tomorrow,
				ncWeek: utils.utils.GetWeek(this.tomorrow),
				today: today
			};
			uni.setStorage({
				data: calendar,
				key: 'fulldate',
				success() {}
			});
		},
		// 前一天
		dayBefore() {
			if (this.yesterday == this.$ut.NewDate()) {
			} else {
				var dates = new Date();
				var year = dates.getFullYear();
				var month = dates.getMonth() + 1;
				var day = dates.getDate();
				var nextDay = dates.getDate() + 1;
				var dayAfter = dates.getDate() + 2;
				if (month < 10) {
					month = '0' + month;
				}
				if (day < 10) {
					day = '0' + day;
				}
				if (nextDay < 10) {
					nextDay = '0' + nextDay;
				}
				if (dayAfter < 10) {
					dayAfter = '0' + dayAfter;
				}
				var nowDate = year + '-' + month + '-' + day;
				var tomorrow = year + '-' + month + '-' + nextDay;
				var afterDay = year + '-' + month + '-' + dayAfter;
				if (nowDate == this.yesterday) {
					var today = '今天';
				} else if (tomorrow == this.yesterday) {
					var today = '明天';
				} else if (afterDay == this.yesterday) {
					var today = '后天';
				} else {
					var today = '';
				}
				const calendar = {
					fulldate: this.yesterday,
					ncWeek: utils.utils.GetWeek(this.yesterday),
					today: today
				};
				uni.setStorage({
					data: calendar,
					key: 'fulldate',
					success() {}
				});
			}
			this.httpData(this.yesterday);
		},
		// 跳转到车次详情
		busFun(e) {
			value.value.busInfoMsg = e.currentTarget.dataset.msg;
			// 判断用户是否需要绑定手机号
			var data = {
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			data.sign = utils.utils.GetSign(data);
			this.$http
				.request({
					url: '/Config/GetConfig',
					method: 'GET',
					data: data
				})
				.then(res => {
					if (res.data.isForceBindPhone == true) {
						var data = {
							ticks: utils.utils.GetTicks(),
							channel: this.$tokenObj.obj.channel
						};
						data.sign = utils.utils.GetSign(data);
						this.$http
							.request({
								url: '/Member/GetUserInfo',
								method: 'get',
								data: data
							})
							.then(res => {
								if (res.data.webMemberInfo.phone == '') {
									uni.navigateTo({
										url: '../binding/binding'
									});
								} else {
									uni.navigateTo({
										url: '../busInfoPay/busInfoPay'
									});
								}
							})
							.catch(err => {
								console.log(err);
							});
					} else {
						uni.navigateTo({
							url: '../busInfoPay/busInfoPay'
						});
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 跳转到日历选择
		goCalendar() {
			uni.navigateTo({
				url: '../calendarWatch/calendarWatch'
			});
		}
	}
};
</script>

<style scoped>
/* 头部日期 */
.selection {
	display: flex;
	padding: 15upx 0;
	background-color: #01a1ea;
	justify-content: space-around;
}
.forth {
	height: 70upx;
	display: flex;
	/* color: #ffffff; */
	font-size: 30upx;
	line-height: 70upx;
	padding-right: 18upx;
}
.before {
	color: #ffffff;
	margin-left: 10upx;
}

.forth image {
	width: 35upx;
	height: 40upx;
	margin-top: 15upx;
}
.future {
	height: 70upx;
	display: flex;
	color: #ffffff;
	font-size: 30upx;
	line-height: 70upx;
	padding-left: 20upx;
}
.future view {
	margin-right: 10upx;
}
.future image {
	width: 35upx;
	height: 40upx;
	margin-top: 15upx;
}
.calendar {
	display: flex;
	padding: 20upx;
	color: #1296db;
	border-radius: 10upx;
	background-color: #ffffff;
}
.calendar image {
	width: 40upx;
	height: 40upx;
}
.long {
	margin: 0 10upx;
}
.forbid {
	color: #cccccc;
}
/* 提示语 */
.marked {
	margin-top: 50%;
	text-align: center;
}
/* 车次列表 */
#busList {
	width: 87%;
	margin: auto;
	display: flex;
	height: 195upx;
	padding: 30upx;
	font-size: 28upx;
	margin-top: 20upx;
	border-radius: 20upx;
	background-color: #fff;
	box-shadow: 0 0 5px #e5e5e5;
}
.time {
	font-size: 40upx;
	font-weight: bold;
	line-height: 180upx;
}
.vertical {
	width: 30upx;
	height: 132upx;
	margin-top: 10upx;
	position: absolute;
	margin-left: 27upx;
}
.station_box {
	display: flex;
	width: 480upx;
	margin-left: 65upx;
	justify-content: space-between;
}
.price {
	color: #ff4500;
	font-size: 40upx;
}
.station {
	color: #808080;
	font-size: 40upx;
}
.target_box {
	display: flex;
	width: 480upx;
	margin-top: 46upx;
	margin-left: 65upx;
	justify-content: space-between;
}
.tickets {
	color: #007aff;
	font-size: 38upx;
}
.rest {
	color: #cccccc !important;
	font-size: 30upx !important;
}
.station view {
	font-weight: bold;
	font-size: 35upx;
	color: #555555;
}

.particulars {
	display: flex;
	margin-top: 10upx;
	margin-left: 28upx;
}

.type {
	color: #999999;
	font-size: 30upx;
	margin-left: 30upx;
}
</style>
